<template>
  <div class="notificationManage">
    <div class="tabArea">
      <div class="tabItem" v-for="tab in tabList" :class="{active: tab.value === type}" @click="tabClick(tab)">
        {{tab.name}}
      </div>
    </div>
    <div class="tableArea">
      <tablePanel tableName="notification" :tableLoading="loading" tableTitle="消息列表" :tableList="tableList"
                  :is-show-drop="false"
                  :tableData="tableData" :total="total" :currentPage="form.page_start" :pageSize="form.page_size"
                  @sizeChange="sizeChange" @pageChange="pageChange" @tableClick="tableClick">
        <zy-button type="primary" @click="clearUnread" v-if="type !== 2">清除未读消息</zy-button>
      </tablePanel>
    </div>
    <notification-panel :message_id="message_id" v-show="message_id>0" @close="closeNoti" :is_record="1"></notification-panel>
  </div>
</template>

<script>
	import {mapGetters} from "vuex";
	import notificationPanel from "../notificationPanel/index";

	export default {
		name: "notificationManage",
		props: {},
		data() {
			return {
				form: {
					page_start: 1,
					page_size: 10
				},
				total: 0,
				tableList: [
					{
						title: '标题',
						limitWidth: 173,
						name: 'title',
						isShow: true,
						showTooltip: true,
						isSelected: true
					},
					{
						title: '内容',
						name: 'content',
						isShow: true,
						showTooltip: true,
						isSelected: true
					},
					{
						title: '消息状态',
						limitWidth: 120,
						name: 'message_status_desc',
						isShow: true,
						isSelected: true
					},
					{
						title: '接收时间',
						limitWidth: 180,
						name: 'ir_created_time_desc',
						isShow: true,
						isSelected: true
					},
					{
						title: '操作',
						limitWidth: 100,
						name: 'hanlder',
						fixed: 'right',
						btns: [
							{
								type: 'detail',
								name: '查看'
							}
						],
						isSelected: true
					}
				],
				tableData: [],
				tableLoading: false,
				tabList: [
					{name: '全部消息', value: 0},
					{name: '已读消息', value: 2},
					{name: '未读消息', value: 1},
				],
				type: 0,
				isShow: false,
				notification: [],
				loading: false,
				message_id: 0
			};
		},
		computed: {
			...mapGetters(['user_type']),
			postUrl() {
				if (this.user_type == 1) {
					return this.$api.g_getMessageList
				}
				if (this.user_type == 2) {
					return this.$api.s_getMessageList
				}
				if (this.user_type == 4) {
					return this.$api.c_getMessageList
				}
			},
			postData() {
				let data = {
					type: this.type,
					pagination: {
						page_start: this.form.page_start,
						page_size: this.form.page_size,
					}
				};
				return data
			}
		},
		watch: {},
		components: {
			notificationPanel
		},
		methods: {
			sizeChange(val) {
				this.form.page_size = val;
				this.getData()
			},
			pageChange(val) {
				this.form.page_start = val;
				this.getData()
			},
			tableClick(data) {
				this.message_id = data.message_id;
			},
			closeNoti(){
				this.message_id = 0;
      },
			clearUnread() {
				let postUrl = '';
				if (this.user_type == 1) {
					postUrl = this.$api.g_clearMessage
				}
				if (this.user_type == 2) {
					postUrl = this.$api.s_clearMessage
				}
				if (this.user_type == 4) {
					postUrl = this.$api.c_clearMessage
				}
				this.$axios.post(postUrl, {}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.$message.success('清除成功');
						this.getData();
						this.$getMessageConfig();
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || "服务繁忙，请稍后再试");
				});
			},
			getData() {
				this.loading = true;
				this.$axios.post(this.postUrl, this.postData).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.tableData = data.list.filter(item => {
							item.detail = true;
							item.content = item.content.replace(/<\s?img[^>]*>/gi, "【图片】").replace(/<[^>]+>/g, "");
							return item;
						});
						this.total = data.total;
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.loading = false;
					this.$message.error(ret.msg || "服务繁忙，请稍后再试");
				});
			},
			tabClick(tab) {
				this.type = tab.value;
				this.getData();
			},
		},
		mounted() {
			this.getData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/common/notificationManage/index.less">

</style>
